<template>
	<xn-form-container title="迁移数据" :width="700" v-model:open="visible" :destroy-on-close="true" @close="onClose">
		<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
			<a-alert message="该功能目前只适用于MySQL数据库" type="warning" />
			<a-row :gutter="16">
				<a-col :span="12">
					<a-form-item label="数据源：" name="dbsId">
						<a-select
							:disabled="true"
							v-model:value="formData.dbsId"
							:options="dbsList"
							style="width: 100%"
							placeholder="请选择数据源"
							@select="getDbTables(formData.dbsId)"
						/>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="表名称：" name="tableName">
						<a-select
							:disabled="true"
							v-model:value="formData.tableName"
							:options="tableList"
							style="width: 100%"
							placeholder="请选择表"
							@select="getDbColumns(formData.dbsId, formData.tableName)"
						/>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item name="dfDataStoreColumnName">
						<template #label>
							<a-tooltip>
								<template #title>
									动态字段存储数据的字段，默认情况下，动态字段会以json字符串的方式存储至该字段中。<br />迁移后历史数据不会丢失，仍保存在该字段中。
								</template>
								<question-circle-outlined />
							</a-tooltip>
							&nbsp 动态字段数据容器：
						</template>
						<a-select
							:disabled="true"
							v-model:value="formData.dfDataStoreColumnName"
							:options="columnList"
							style="width: 100%"
							placeholder="请选择动态字段数据容器"
						/>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item name="migrateTargetColumnName">
						<template #label>
							<a-tooltip>
								<template #title>
									该字段表示将动态字段的数据，迁移至新的字段中。<br />注意：请为目标字段准备一个新的且无数据的字段，否则是无法迁移成功的。
								</template>
								<question-circle-outlined />
							</a-tooltip>
							&nbsp 迁移目标字段：
						</template>
						<a-select
							v-model:value="formData.migrateTargetColumnName"
							:options="columnList"
							style="width: 100%"
							placeholder="请选择目标字段"
						/>
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
		<template #footer>
			<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
			<a-button type="primary" @click="onSubmit" :loading="submitLoading">确认</a-button>
		</template>
	</xn-form-container>
</template>

<script setup name="migrate">
	import { cloneDeep } from 'lodash-es'
	import { required } from '@/utils/formRules'
	import dfcApi from '@/views/plugin/dbs/api/dfcApi'
	// 抽屉状态
	const visible = ref(false)
	const emit = defineEmits({ successful: null })
	const formRef = ref()
	// 表单数据
	const formData = ref({})
	// 定义
	const dbsList = ref([])
	const tableList = ref([])
	const columnList = ref([])

	const submitLoading = ref(false)

	// 打开抽屉
	const onOpen = (record) => {
		visible.value = true
		formData.value = {
			sortCode: 99
		}
		initData(record)
	}

	// 初始化基础
	const initData = (record) => {
		dfcApi.dfcDbsSelector().then((data) => {
			dbsList.value = data.map((item) => {
				return {
					value: item['id'],
					label: item['poolName']
				}
			})
		})
		if (record) {
			let recordData = cloneDeep(record)
			formData.value = Object.assign({}, recordData)
			getDbTables(record.dbsId)
			getDbColumns(record.dbsId, record.tableName)
		}
	}

	// 下拉框选择数据源
	const getDbTables = (dbsId) => {
		// 获取数据库中的所有表
		const param = {
			dbsId: dbsId
		}
		dfcApi.dbTableSelector(param).then((data) => {
			tableList.value = data.map((item) => {
				return {
					value: item['tableName'],
					label: `${item['tableRemark']}-${item['tableName']}`
				}
			})
		})
	}
	// 获取表字段
	const getDbColumns = (dbsId, tableName) => {
		const param = {
			dbsId: dbsId,
			tableName: tableName
		}
		dfcApi.dbColumnSelector(param).then((data) => {
			columnList.value = data.map((item) => {
				return {
					value: item['columnName'],
					label: `${item['columnRemark']}-${item['columnName']}`
				}
			})
		})
	}

	// 关闭抽屉
	const onClose = () => {
		formRef.value.resetFields()
		formData.value = {}
		visible.value = false
	}
	// 默认要校验的
	const formRules = {
		dbsId: [required('请选择数据源')],
		tableName: [required('请选择表')],
		dfDataStoreColumnName: [required('请选择动态字段数据容器')],
		migrateTargetColumnName: [required('请选择迁移目标字段')]
	}
	// 验证并提交数据
	const onSubmit = () => {
		formRef.value.validate().then(() => {
			submitLoading.value = true
			const formDataParam = cloneDeep(formData.value)
			dfcApi
				.dfcMigrate(formDataParam)
				.then(() => {
					onClose()
					emit('successful')
				})
				.finally(() => {
					submitLoading.value = false
				})
		})
	}
	// 抛出函数
	defineExpose({
		onOpen
	})
</script>
